<template>
	<div>
		<h2 class="public-title">下线开户</h2>
		<div class="xx-open">
			<div class="input-wrap">
				<Form ref="registerInfo" :model="registerInfo" :rules="registerrule" :label-width="80" label-position="right">
					<FormItem label="账号" prop="userName">
						<Input :maxlength="15" placeholder="请输入6-15位且必须包含英文和数字的账号" v-model="registerInfo.userName" ref="username"></Input>
					</FormItem>
					<FormItem label="密码" prop="password">
						<Input :maxlength="15" type="password" placeholder="请输入6-15位且必须包含英文和数字的密码" v-model="registerInfo.password"></Input>
					</FormItem>
					<FormItem label="确认密码" prop="password2">
						<Input :maxlength="15" type="password" placeholder="请输入确认密码" v-model="registerInfo.password2" @keyup.enter.native="registerNow('registerInfo')"></Input>
					</FormItem>
				</Form>
				<div class="btnopen"><Button type="warning" @click="registerNow('registerInfo')">立即开户</Button></div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	data () {
		//账号验证
		const validateUserName = (rule, value, callback) => {
			if (!value) {
				callback(new Error("账号不能为空"));
			} else if (!/^[0-9a-z]{6,15}$/i.test(value)) {
				callback(new Error("请输入6-15位且必须包含英文和数字的账号"));
			} else if (value == this.userName) {
				callback(new Error("账号已存在"));
			} else {
				callback();
			}
		};
		//密码验证
		const validatePsd = (rule, value, callback) => {
			if (value === "") {
				callback(new Error("密码不能为空"));
			} else if (!/^(?![^a-zA-Z]+$)(?!\D+$).{6,15}$/.test(value)) {
				callback(new Error("请输入6-15位且必须包含英文和数字的密码"));
			} else {
				if (this.registerInfo.password2 !== "") {
					this.$refs.registerInfo.validateField("password2");
				}
				callback();
			}
		};
		//确认密码验证
		const validateConfirmPsd = (rule, value, callback) => {
			if (value === "") {
				callback(new Error("请输入确认密码"));
			} else if (value !== this.registerInfo.password) {
				callback(new Error("两次密码输入不一致"));
			} else {
				callback();
			}
		};
		return {
			//注册信息
			registerInfo: {
				userName: '',
				password: '',
				password2: '',
			},
			registerrule: {
				userName: [{ validator: validateUserName, trigger: "blur", required: true }],
				password: [{ validator: validatePsd, trigger: "blur", required: true }],
				password2: [{ validator: validateConfirmPsd, trigger: "blur", required: true }],
			},
		}
	},
	methods: {
		registerNow(registerInfo) { //立即开户
			let vm = this;
			vm.$refs[registerInfo].validate(valid => {
				if (valid) {
					let params = {};
						params.token = localStorage.getItem("token");
						params.username = vm.registerInfo.userName;
						params.password = vm.registerInfo.password;
						params.password2 = vm.registerInfo.password2;
						params.flag = 4;
						params.type = 4;
					vm.$http.post(vm.urlRequest + "?m=api&c=user&a=openAccount", params).then(res => {
						if (res.data.status == 0) {
							vm.$Message.success("开户成功");
							vm.registerInfo.userName = '';
							vm.registerInfo.password = '';
							vm.registerInfo.password2 = '';
						} else {
							let msg = '';
							if (res.data.ret_msg && res.data.ret_msg != '') {
								msg = res.data.ret_msg
							} else {
								msg = '开户失败'
							}
							this.$Message.error(msg);
                      	}
					})
				}
			})
		}
	},
}
</script>
<style scoped>
.btnopen {
    margin-left: 210px;
}
</style>



// WEBPACK FOOTER //
// src/components/PersonalCenter/teamManager/underAccount.vue